<template>
  <div class="main">
    <div :class="{ container: true, 'right-panel-active': active2 }">
      <!-- 注册 -->
      <div class="container__form container--signup">
        <q-form id="form1" class="form" @submit.prevent>
          <h3 class="form__title">注册</h3>
          <q-input
            v-model="user.username"
            :dense="true"
            name="username"
            type="text"
            placeholder="用户名"
            class="input"
          />
          <q-input
            v-model="user.email"
            :dense="true"
            name="email"
            type="email"
            placeholder="邮箱"
            class="input"
          >
            <template #append>
              <q-btn round dense flat icon="send" @click="vertification" />
            </template>
          </q-input>

          <q-input
            v-model="user.code"
            :dense="true"
            type="text"
            placeholder="验证码"
            class="input"
          />
          <q-input
            v-model="user.password"
            :dense="true"
            name="password"
            type="password"
            placeholder="密码"
            class="input"
          />
          <button class="btn" @click="signup">注册</button>
          <q-btn type="submit" class="hidden"></q-btn>
        </q-form>
      </div>

      <!-- 登录 -->
      <div class="container__form container--signin">
        <q-form id="form2" class="form" @submit.prevent>
          <h3 class="form__title">登录</h3>
          <q-input
            v-model="user.email"
            :dense="true"
            type="email"
            placeholder="邮箱"
            class="input"
          >
            <template #append>
              <q-btn round dense flat icon="send" @click="vertification" />
            </template>
          </q-input>
          <q-input
            v-model="user.code"
            :dense="true"
            type="text"
            placeholder="验证码"
            class="input"
          />
          <q-input
            v-model="user.password"
            :dense="true"
            type="password"
            placeholder="密码"
            class="input"
          />
          <a href="#" class="link">Forgot your password?</a>
          <button class="btn" @click="signin">登录</button>
          <q-btn type="submit" class="hidden"></q-btn>
          <q-btn class="hidden" @click="testLogin">测试登录</q-btn>
        </q-form>
      </div>

      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button id="signIn" class="btn" @click="change">登录</button>
          </div>
          <div class="overlay__panel overlay--right">
            <button id="signUp" class="btn" @click="change">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { post } from "src/js/fetch";
import { baseurl } from "src/js/global";
import { useQuasar } from "quasar";
import { myencrypt } from "src/js/RSAEncrypt";

const logged = defineModel({ type: String, default: "false" });

onMounted(() => {
  if (
    sessionStorage.getItem("logged") == "true" ||
    sessionStorage.getItem("token")
  ) {
    testLogin();
  }
});

const $q = useQuasar();
const router = useRouter();
const user = ref({
  username: "aaa",
  email: "aa@qq.com",
  password: "aaaa",
  code: "",
});

function testLogin() {
  sessionStorage.setItem("logged", true);
  logged.value = "true";
  router.push({ path: "/index" });
}

function vertification() {
  let url = baseurl + "user/code?email=" + user.value.email;
  post(url, null)
    .then((res) => {
      if (res.data) {
        $q.notify({
          message: "获取到的验证码为:" + res.data,
          timeout: 0,
          closeBtn: "我输入完了",
          type: "positive",
          position: "center",
        });
        user.value.code = res.data;
      } else
        $q.notify({
          message: res.error.message,
          type: "warning",
          position: "center",
        });
    })
    .catch((err) => {
      $q.notify({ message: err.message, type: "warning", position: "center" });
    });
}

function signin() {
  const url1 = baseurl + "user/login";
  let tempuser = {};
  tempuser = Object.assign(tempuser, user.value);
  tempuser.password = myencrypt(tempuser.password);
  post(url1, tempuser).then((res) => {
    if (res.success) {
      if (
        user.value.email == "aa@qq.com" ||
        user.value.email == "admin@aa.com"
      ) {
        sessionStorage.setItem("role", 2);
      } else if (user.value.email == "1@qq.com") {
        sessionStorage.setItem("role", 1);
      } else {
        sessionStorage.setItem("role", 0);
      }
      sessionStorage.setItem("token", res.data);
      $q.notify({
        message: "登录成功了",
        type: "positive",
        position: "center",
      });
      sessionStorage.setItem("logged", true);
      logged.value = "true";
      router.push({ path: "/index" });
    } else {
      $q.notify({
        message: "登录失败了，" + res.errorMsg,
        type: "warning",
        position: "center",
      });
    }
  });
}

function signup() {
  const url1 = baseurl + "user/register";
  let tempuser = {};
  tempuser = Object.assign(tempuser, user.value);
  tempuser.password = myencrypt(tempuser.password);
  post(url1, tempuser).then((res) => {
    if (res.success) {
      sessionStorage.setItem("token", res.data);
      $q.notify({
        message: "注册成功了",
        type: "positive",
        position: "center",
      });
      sessionStorage.setItem("logged", true);
      logged.value = "true";
      router.push({ path: "/index" });
    } else {
      $q.notify({
        message: "注册失败了，" + res.errorMsg,
        type: "warning",
        position: "center",
      });
    }
  });
}

const active2 = ref(true);
function change() {
  active2.value = !active2.value;
}
</script>

<style scoped>
.main {
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei UI",
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  background: url("src/assets/images/background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form__title {
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}

.link {
  color: #333;
  font-size: 0.9rem;
  margin: 0.5rem 0;
  text-decoration: none;
}

.container {
  background-color: #e9e9e9;
  border-radius: 0.7rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: 420px;
  width: 758px;
  overflow: hidden;
  position: relative;
}

.container__form {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.container--signin {
  left: 0;
  width: 50%;
  z-index: 2;
}

.container.right-panel-active .container--signin {
  transform: translateX(100%);
}

.container--signup {
  left: 0;
  opacity: 0;
  width: 50%;
  z-index: 1;
}

.container.right-panel-active .container--signup {
  animation: show 0.6s;
  opacity: 1;
  transform: translateX(100%);
  z-index: 5;
}

.container__overlay {
  height: 100%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  z-index: 100;
}

.container.right-panel-active .container__overlay {
  transform: translateX(-100%);
}

.overlay {
  background: url("src/assets/images/background.jpg");
  background-color: #008997;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: -100%;
  position: relative;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 200%;
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay__panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 50%;
}

.overlay--left {
  transform: translateX(-20%);
}

.container.right-panel-active .overlay--left {
  transform: translateX(0);
}

.overlay--right {
  right: 0;
  transform: translateX(0);
}

.container.right-panel-active .overlay--right {
  transform: translateX(20%);
}

.btn {
  background-color: #0367a6;
  background-image: linear-gradient(90deg, #0367a6 0%, #008997 74%);
  border-radius: 20px;
  border: 1px solid #0367a6;
  color: #e9e9e9;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 1rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

.form > .btn {
  margin-top: 1.5rem;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  outline: none;
}

.form {
  background-color: #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;
  text-align: center;
}

.input {
  background-color: #fff;
  padding: 0.1rem 0.1rem;
  margin: 0.5rem 0;
  width: 100%;
}

@keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}
</style>
